<template>
  <view class="icon" :style="rootStyle" @click="handleIcon" :hover-class="hoverClass" hover-stay-time="400">
    <i :class="['iconfont', `${iconName}`]" :style="iconStyle"></i>
  </view>
</template>

<script>
export default {
  name: 'icon',
  props: {
    // 图标名称
    name: {
      type: String,
      default: null
    },
    // 图标类型 : [ normal / round / radius ]
    type: {
      type: String,
      default: 'normal'
    },
    // 图标颜色
    color: {
      type: String,
      default: null
    },
    // 图标大小
    size: {
      type: [Number, String],
      default: 23
    },
    // 圆形图标是否具有阴影
    shadow: {
      type: Boolean,
      default: () => true
    },
    // 小程序内点击图标的效果
    hoverClass: {
      type: String,
      default: 'hover-jump'
    }
  },
  data() {
    return {}
  },
  computed: {
    iconName() {
      return `icon-${this.name}`
    },
    // 返回图标大小
    iconSize() {
      const size = this.size
      return this.$validation.isNum(size) ? `${size}px` : size
    },
    // 返回图标样式
    iconStyle() {
      const commonStyle = `font-size: ${this.iconSize}`
      const iconStyle = {
        normal: `color: ${this.color};`,
        round: `color: ${this.$variables.white};`, // 圆 - 内图标为白色
        radius: `color: ${this.color};`
      }
      const selectStyle = this.type ? iconStyle[this.type] : iconStyle['normal']
      return selectStyle + commonStyle
    },
    rootSize() {
      const size = this.size
      const offsetSize = 16
      return this.$validation.isNum(size) ? `${Number(size) + offsetSize}px` : size
    },
    rootShadow() {
      if (!this.shadow || !this.color) return ''
      return this.$variables[`${this.name}Shadow`] || `6rpx 6rpx 8rpx ${this.$variables['whiteShadow']}`
    },
    rootStyle() {
      const rootStyle = {
        normal: '',
        round: `background: ${this.color}; border-radius: 50%; width: ${this.rootSize}; height: ${this.rootSize}; box-shadow: ${this.rootShadow};`,
        radius: ''
      }
      return this.type ? rootStyle[this.type] : rootStyle['normal']
    }
  },
  methods: {
    handleIcon() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
// 字体图标
@import '~@/assets/iconfont/iconfont.css';

.icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
